<template>
    <div class="movie column">
        <h1 class="page-title">选电影</h1>
        <div class="row item-list">
            <span class="item"
                @click="selectItem(item)"
                :class="{'selecteditem':selectedKind===item}"
                v-for="(item, index) in kindList"
                :key="index">{{item}}</span>
        </div>
        <div class="select row">
            <div class="radio">
                <el-radio-group v-model="selectedRadio">
                    <el-radio :label="1">按热度排序</el-radio>
                    <el-radio :label="2">按时间排序</el-radio>
                    <el-radio :label="3">按评价排序</el-radio>
                </el-radio-group>
            </div>
            <div class="row checkbox">
                <el-checkbox-group v-model="selectedCheckbox">
                    <el-checkbox label="我没看过的"></el-checkbox>
                    <el-checkbox label="可在线播放"></el-checkbox>
                </el-checkbox-group>
            </div>
        </div>
        <div class="row movive-list">
            <CardMovie v-for="(item, index) in 24"
                :key="index"
                :info="iteminfo"></CardMovie>
        </div>
        <div class="bottom">
            <img src="../assets/img/bottom-gg.jpg"
                alt="">
        </div>
    </div>
</template>
<script>
import CardMovie from "@/components/CardMovie"
export default {
    neme: "movie",
    components: {
        CardMovie
    },
    data() {
        return {
            kindList: [
                "热门",
                "最新",
                "经典",
                "可播放",
                "豆瓣高分",
                "冷门佳片",
                "华语",
                "欧美",
                "韩国",
                "日本",
                "动作",
                "喜剧",
                "爱情",
                "科幻",
                "悬疑",
                "恐怖",
                "动画"
            ],
            selectedKind: "热门",
            selectedRadio: 1,
            selectedCheckbox: [],
            iteminfo: {
                imgUrl: require("../assets/img/card.jpg"),
                imgName: "蜘蛛侠:平行宇宙",
                imgNumber: 3.5,
                time: 2018,
                PeopleNumber: 4445155,
                minute: 180,
                address: "中国大陆",
                director: "杨晨/老赵",
                performer: "哈哈/呵呵/嘻嘻/么么哒",
                comment:
                    "很多人说用mv的方式拍摄不好，观影体验差，那你们有没有想过，这些小朋友们在拍摄的时候，心里该会有多么的开心，换个角度想想吧 - 霍灵轩的短评",
                state: "可播放"
            }
        }
    },
    methods: {
        /**
         * 选择电影
         */
        selectItem(item) {
            this.selectedKind = item
        }
    }
}
</script>

<style lang="less" scoped>
    .movie {
        margin-top: 30px;
        .item-list {
            flex-wrap: wrap;
            width: 65%;
            min-width: 850px;
            .item {
                display: inline-block;
                zoom: 1;
                cursor: pointer;
                padding: 1px 10px;
                margin: 0 3px 5px 0;
                color: #666;
                font-size: 14px;
                border-radius: 2px;
            }
            .selecteditem {
                background: #4b8ccb;
                color: #fff;
            }
        }
        .select {
            width: 60%;
            min-width: 850px;
            border-top: 1px solid #eee;
            margin-top: 15px;
            padding: 15px 0;
            overflow: hidden;
            font-size: 13px;
            color: #666;
            zoom: 1;
            .radio {
                width: 60%;
            }
            .checkbox {
                width: 35%;
                justify-content: flex-end;
            }
        }
        .movive-list {
            margin-left: -15px;
            flex-wrap: wrap;
        }
        .bottom {
            width: 100%;
            height: 110px;
        }
    }
</style>
